<script setup lang="ts">
import { BaseApi } from "@/apis/base.api";
import { useUserStore } from "@/stores/user.store";
import { CheckOutlined } from "@ant-design/icons-vue";
import { Modal } from 'ant-design-vue';
import useForm from "@/hooks/useForm";

// 获取详情hook
const { formRef, formState, onValidateFields } = useForm({
  // 获取表单数据
  formState: {} as Record<string, any>,
  // 获取详情数据
  async onInit() {
    formState.value = useUserStore().userInfo;
    return Promise.resolve(useUserStore().userInfo);
  },
  // 表单校验成功回调
  async onValidateSuccess(values) {
    const response = await BaseApi.auth.reset({
      resetType: "1",
      loginCode: useUserStore().userInfo.loginCode,
      oldPassword: values.oldPassword,
      password: values.password,
      repassword: values.repassword
    });
    if(response.success) {
      Modal.info({
        title:"温馨提示",
        content: "密码修改成功，请退出重新登录",
        okText:"重新登录",
        onOk(){
          useUserStore().logout();
        }
      });
    }
  }
})
</script>

<template>
  <div>
    <AForm ref="formRef" :model="formState" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }" @finish="onValidateFields">
      <div class="flex flex-col gap-2">
        <WebxCard :titleProps="{ title:'修改密码' }">
          <ARow class="px-2 pb-4">
            <ACol :span="24">
              <AFormItem label="旧密码" name="oldPassword" :rules="[{ required: true, message: '请输入旧密码' }]">
                <AInputPassword v-model:value="formState.oldPassword" placeholder="请输入旧密码" />
              </AFormItem>
            </ACol>
            <ACol :span="24">
              <AFormItem label="新密码" name="password" :rules="[{ required: true, message: '请输入新密码' }]">
                <AInputPassword v-model:value="formState.password" placeholder="请输入新密码"/>
              </AFormItem>
            </ACol>
            <ACol :span="24">
              <AFormItem label="重新输入" name="repassword" :rules="[{ required: true, message: '请重新输入新密码' }]">
                <AInputPassword v-model:value="formState.repassword" placeholder="请重新输入新密码" />
              </AFormItem>
            </ACol>
          </ARow>
        </WebxCard>
      </div>
      <AFormItem :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }">
        <div class="flex justify-end items-center gap-2">
          <AButton type="primary" htmlType="submit"><CheckOutlined /> 保存</AButton>
        </div>
      </AFormItem>
    </AForm>
  </div>
</template>

<style scoped lang="less"></style>
